<template>
  <div class="hello">
    
    <div id="map" class="map" tabindex="0"></div>

  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";

export default {
  name: "HelloWorld",
  props: {
    
  },
  created() {
  },
  mounted(){
    
    new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

 .map {
        width: 100%;
        height:100%;
      }
     
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
</style>
